<template>
	<div class="w-page">
		<!-- 头部 -->
		<Header navNum="1"></Header>
		<!-- 内容 -->
		<div class="w-loginbox">
			<div class="w-width2">
				<div class="w-con">
					<div class="w-rightbox">
						<div class="w-logininput">
							<form action="form_action.asp" method="get">
								<h3 class="w-welcome">重置密码</h3>
								<ul>
									<li>
										<div class="inputbox flex hs vc">
											<p  class="shrink0">联系电话</p>
											<input type="number" placeholder='请输入账号'>
										</div>
									</li>
									<li class="flex vc">
										<div class="inputbox  flex hb vc">
											<p  class="shrink0">验证码</p>
											<div class="inputbox2 flex vc">
												<input type="number" placeholder="请输入手机号码">
												<input type="button" value="获取验证码" />
											</div>
											
										</div>
									</li>
									<li>
										<div class="inputbox flex hs vc">
											<p class="shrink0">新密码</p>
											<input type="password" placeholder='请输入新密码'>
										</div>
									</li>
									<li>
										<div class="inputbox flex hs vc">
											<p  class="shrink0">确认新密码</p>
											<input type="password" placeholder='请确认新密码'>
										</div>
									</li>
									<li>
										
									</li>
								</ul>
								<div class="inputbox3 flex hs vc">
									<input type="submit" value="提 交" class="rebtn" />
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
</script>

<style scoped>
	.w-page {
		height: 100vh;
		width: 100vw;
		overflow: hidden;
	}

	.w-loginbox {
		width: 100%;
		height: calc(100vh - 136px);
		background-color: #DDC4A6;
		background-size: cover;
		background-position: center;
	}

	.w-width2 {
		width: 50%;
		margin: 0 auto;
		padding-top: 70px;
		padding-bottom: 110px;
		box-sizing: border-box;
		height: 100%;
	}

	.w-con {
		background: #fff;
		/* height: 100%; */
		border-radius: 10px;
		padding: 46px 66px;
		box-sizing: border-box;
	}

	.w-welcome {
		font-size: 24px;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		margin-bottom: 56px;
	}

	ul {
		width: 80%;
	}

	li {
		margin-bottom: 26px;
		width: 100%;
	}
	.inputbox2{
		width: calc(100% - 160px);
	}
.inputbox3{
	width: 60%;
	margin: 0 auto;
}
	.inputbox3 input{
		margin-top: 30px;
		margin-left: 0;
	}
.inputbox{
	width: 100%;
}
	.inputbox p {
		width: 160px;
		text-align: right;
		font-size: 16px;
		font-weight: 300;
		color: rgba(51, 51, 51, 1);
	}

	input {
		width: calc(100% - 160px);
		background: rgba(249, 249, 249, 1);
		border-radius: 8px;
		outline: none;
		border: none;
		height: 46px;
		padding-left: 10px;
		box-sizing: border-box;
		margin-left: 25px;
		display: block;
		font-size: 16px;
	}

	input:focus {
		outline: none;
		border: none;
	}
	.rebtn{
		width: 100%;
		background: linear-gradient(90deg, rgba(214, 185, 143, 1), rgba(207, 169, 114, 1));
		border-radius: 10px;
		color: #fff;
		font-size: 18px;
	}
</style>
